<template>
  <fixed-pagination>
    <div class="process-operation center mobile-btn-group">
      <!-- 草稿中或历史表单仅展示返回按钮 -->
      <template v-if="showOperateBtns">
        <div v-if="operateData.auth" :class="{'is-mobile': showMobilePage}" class="btn-bar operate-bar">
          <div class="btn-bar-left">
            <!-- 剩余按钮 -->
            <el-button v-if="!showMobilePage && showResourceSyncbtn && type === PROCESS_TYPE.SIGNUP" size="small" class="global-plain-btn" @click="handleSignUpSync">同步资源</el-button>
            <slot name="upOnline" />
            <slot v-if="!showMobilePage" name="signUp"/>
            <el-button v-if="type === PROCESS_TYPE.SETTLE && !showMobilePage && showPaymentBtn" type="primary" size="small" @click="toPay">付款</el-button>
            <el-button v-if="type === PROCESS_TYPE.SETTLE && !showMobilePage && showAgainLaunchBtn" type="primary" size="small" @click="againLaunch">申请余款</el-button>
            <slot />
          </div>
          <div class="btn-bar-center">
            <!-- 审批相关按钮 -->
            <el-button v-if="showResubmitBtn && !showMobilePage" :disabled="disabled" type="primary" size="small" class="empty-btn-style" @click="handleResubmit">重新提交</el-button>
            <el-button v-if="showCommonEditBtn && !showMobilePage" :disabled="disabled" type="primary" size="small" class="submit-btn empty-btn-style" @click="handleRemodify">编辑</el-button>
            <el-button v-if="type === PROCESS_TYPE.SETTLE && !showMobilePage && showEditBtn" type="primary" size="small" class="submit-btn empty-btn-style" @click="toEdit">编辑</el-button>
            <el-button v-if="operateData.auth.includes(2) && !showMobilePage" :disabled="disabled" type="primary" size="small" class="submit-btn" @click="handleAudit(1)">通过</el-button>
            <el-button v-if="operateData.auth.includes(2) && !showMobilePage" :disabled="disabled" plain type="danger" size="small" class="refuse-btn" @click="handleAudit(0)">退回</el-button>
            <el-button v-if="!showMobilePage && allowCloseProcess" plain type="danger" size="small" class="close-process-btn" @click="closeProcess">结束流程</el-button>
          </div>
          <div class="btn-bar-right">
            <!-- 抄送、更多操作、返回列表 -->
            <el-button v-if="!showMobilePage && showSendBtn" size="small" class="global-plain-btn" @click="handleSendMsg">抄送</el-button>
            <el-dropdown v-if="showMobilePage || showCommonBtns || isShowMoreBtn" :placement="showMobilePage?'bottom':'bottom-end'" trigger="click">
              <div class="el-dropdown-link">
                <el-button v-if="!showMobilePage" size="small" class="more-actions">更多操作<i class="el-icon-caret-top"/></el-button>
                <template v-else>
                  <div class="mobile-icon">
                    <el-image :src="mobileIcon" class="img"/>
                    <span class="text">更多</span>
                  </div>
                </template>
              </div>
              <el-dropdown-menu slot="dropdown" style="padding: 0;">
                <el-dropdown-item style="text-align: center" class="tabel-btn white-space-nowrap">
                  <slot name="menu" />
                </el-dropdown-item>
                <!-- 手机适配 -->
                <el-dropdown-item v-if="showRecallBtn" style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="handleHigherRecall">
                  <div>撤回</div>
                </el-dropdown-item>
                <template v-if="showMobilePage">
                  <el-dropdown-item v-if="allowCloseProcess" style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="closeProcess">
                    <div>结束流程</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="showCommonEditBtn" style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="handleRemodify">
                    <div>编辑</div>
                  </el-dropdown-item>
                  <el-dropdown-item style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="showCommentDialog">
                    <div>评论</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="showResubmitBtn" style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="handleResubmit">
                    <div>重新提交</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="showContractCreateBtn" style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="handleContractCreate">
                    <div>发起合同审批</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="type === PROCESS_TYPE.SETTLE && showPaymentBtn" style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="toPay">
                    <div>付款</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="type === PROCESS_TYPE.SETTLE && showAgainLaunchBtn" style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="againLaunch">
                    <div>申请余款</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="type === PROCESS_TYPE.SETTLE && showEditBtn" style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="toEdit">
                    <div>编辑</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="showSendBtn" style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="handleSendMsg()">
                    <div>抄送</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="showResourceSyncbtn && type === PROCESS_TYPE.SIGNUP" style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="handleSignUpSync">
                    <div>同步资源</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="showResourceBtn && type === PROCESS_TYPE.UP_ONLINE" style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="handleRefreshResource()">
                    <div>刷新资源</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="showResourceBtn && type === PROCESS_TYPE.UP_ONLINE" style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="handleEditResource()">
                    <div>编辑资源</div>
                  </el-dropdown-item>
                </template>
                <template v-if="showCommonBtns">
                  <!-- 允许审批人修改表单 用权限值10控制 -->
                  <el-dropdown-item v-if="operateData.auth.includes(10) && isCurrentExamineUser" style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="handleModify">
                    <div>编辑</div>
                  </el-dropdown-item>
                  <!-- 除了请款结算、达人初筛的订单请款外，其他都可以再次发起（复制） -->
                  <el-dropdown-item v-if="showCreateAgain" style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="handleCreateNew">
                    <div>复制</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="showPressBtn" style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="handlePressSend()">
                    <div>催办</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="showCancelPressBtn" style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="handleCancelPress()">
                    <div>取消加急</div>
                  </el-dropdown-item>
                </template>
                <template v-if="isShowMoreBtn">
                  <el-dropdown-item v-if="(type === PROCESS_TYPE.CONTRACT || type === PROCESS_TYPE.HISTORY) && operateData.auth.includes(7)" style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="deliverTo(1)">
                    <div>申请人转交</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="operateData.auth.includes(6)" :disabled="disabled" style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="handleAddSigner">
                    <div>加签</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="showCommentBtn" style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="handleComment()">
                    <div>评论({{ getCommentTotal }})</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="showPrintBtn" style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="handlePrint()">
                    <div>打印</div>
                  </el-dropdown-item>
                </template>
                <template v-if="isLegalType(type) && isShowMoreBtn">
                  <!-- <el-dropdown-item v-if="operateData.auth.includes(1)" :disabled="disabled" style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="handleReapply">
                  <div>重新申请</div>
                </el-dropdown-item> -->
                  <el-dropdown-item v-if="getApproverStatus" style="text-align: center" class="tabel-btn" @click.native="handleApproverChange">
                    <div>转交</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="operateData.auth.includes(0)" :disabled="hidePressBtn ? false : disabled" style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="handleRevocation(1)">
                    <el-tooltip v-if="!showMobilePage" class="item" effect="dark" content="作废审批单，该审批作废" placement="right">
                      <div>作废</div>
                    </el-tooltip>
                    <div v-else>作废</div>
                  </el-dropdown-item>
                </template>
                <el-dropdown-item v-if="(operateData.auth.includes(3) || operateData.auth.includes(5)) && isShowMoreBtn" :disabled="disabled" style="text-align: center" class="tabel-btn" @click.native="handleRecall(operateData.auth)">
                  <el-tooltip v-if="!showMobilePage" class="item" effect="dark" content="撤回审批单，且可对信息进行修改" placement="right">
                    <div>撤回</div>
                  </el-tooltip>
                  <div v-else>撤回</div>
                </el-dropdown-item>
                <template v-if="type === PROCESS_TYPE.SETTLE && isShowMoreBtn">
                  <el-dropdown-item v-if="isNotOrder && hasRouteAuth('medium:supplierAudit:settleCopy')" style="text-align: center" class="tabel-btn" @click.native="handleSettleCopy">
                    <div>复制结算单</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="(operateData.auth.includes(0) && (currentExamineStatus === 0 || currentExamineStatus === 1 || currentExamineStatus === 2)) || examineStatus === 5" style="text-align: center" class="tabel-btn" @click.native="handleRevocation(0)">
                    <el-tooltip v-if="!showMobilePage" class="item" effect="dark" content="作废审批单，该审批作废" placement="right">
                      <!-- <div>撤销</div> -->
                      <div>作废</div>
                    </el-tooltip>
                    <div v-else>作废</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="showExamineBackBtn" style="text-align: center" class="tabel-btn" @click.native="handleExamineBack">
                    <div>撤回</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="showSettleApprovalChangeBtn" style="text-align: center" class="tabel-btn" @click.native="handleSupplierApproverChange">
                    <div>转交</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="showMobilePage && (!isExamineing || isShowExamine) && !isComplete && isCreator" style="text-align: center" class="tabel-btn" @click.native="launchExamine">
                    <div>发起审批</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="isExamined && !isExamineing && !isComplete && hasRouteAuth('medium:supplierAudit:success')" style="text-align: center" class="tabel-btn" @click.native="successSettle">
                    <div>结算完成</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="!isExamined && !isExamineing && isCreator && !isComplete" style="text-align: center" class="tabel-btn" @click.native="closeSettle">
                    <div>关闭结算</div>
                  </el-dropdown-item>
                </template>
                <!--
                <template v-if="type === PROCESS_TYPE.SIGNUP">
                <el-dropdown-item v-if="showResourceSyncbtn" style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="handleSignUpSync">
                  <div>同步资源</div>
                </el-dropdown-item>
                  <el-dropdown-item v-if="!showMobilePage && showSendBtn" style="text-align: center" class="tabel-btn white-space-nowrap" @click.native="handleSendMsg">
                    <div>抄送</div>
                  </el-dropdown-item>
                </template>
                -->
              </el-dropdown-menu>
            </el-dropdown>
            <el-button v-if="!showMobilePage" type="info" size="small" class="back-btn cancel-btn-style" @click="toBack">返回列表</el-button>
          </div>

          <!-- <el-button v-if="type === PROCESS_TYPE.SETTLE && !showMobilePage && canLaunchExamine" type="primary" size="small" @click="launchExamine">发起审批</el-button> -->

          <div v-if="showMobilePage && showSignUpSlot" class="mobile-btn-flex ml10">
            <slot name="signUp"/>
          </div>
          <el-button v-if="operateData.auth.includes(2) && showMobilePage" :disabled="disabled" type="primary" size="small" class="submit-btn" @click="handleAudit(1)">通过</el-button>
          <el-button v-if="operateData.auth.includes(2) && showMobilePage" :disabled="disabled" plain type="danger" size="small" class="refuse-btn" @click="handleAudit(0)">退回</el-button>
        </div>
        <div v-else :class="{'is-mobile': showMobilePage}" class="btn-bar">
          <!-- 历史合同编辑 -->
          <el-button v-if="hasRouteAuth('crm:contractManage:edit') && type === PROCESS_TYPE.HISTORY" type="primary" size="small" class="submit-btn empty-btn-style" @click="handleHisEdit">编辑</el-button>
          <el-button v-if="!showMobilePage" type="info" size="small" class="back-btn cancel-btn-style" @click="toBack">返回列表</el-button>
        </div>
        <div v-if="sessionCacheKey && !hiddenChangeApproval" class="process-operation-btn process-operation-to-prev" @click="handleToggleProcess(0)"><i class="el-icon-arrow-left" /></div>
        <div v-if="!hiddenChangeApproval" class="process-operation-btn process-operation-to-next" @click="handleToggleProcess(1)"><i class="el-icon-arrow-right" /></div>
        <slot name="pager"/>
      </template>
      <div v-else class="btn-bar">
        <el-button type="info" size="small" class="back-btn cancel-btn-style" @click="toBack">返回列表</el-button>
        <slot v-if="isCurrentVersion"/>
      </div>
      <div v-if="isShowStampFixedTip && processStatus !== 3" class="stamp-fixed-tip">
        <i class="el-icon-warning" />
        <span>注意：当前节点需要选择盖章类型</span>
      </div>
    </div>
  </fixed-pagination>
</template>

<script>
// auth 中的 操作 含义 0: 撤销，1:重新申请，2:审批，3:撤回，4:编辑，5:撤回到发起，6:加签，7:转交
import { hasRouteAuth } from '@/utils/permission';
import { PROCESS_TYPE } from '@/utils/const/process';
import { PROCESS_SEND_PERMISSION, PROCESS_CREATE_PERMISSION } from '@/utils/const';
import { mapState } from 'vuex';
import mobileIcon from '@/assets/mobileIcon/moreOperate.png';
import ElMessage from '@/utils/message';
export default {
  props: {
    type: {
      type: Number,
      default: PROCESS_TYPE.CONTRACT
    },
    moduleId: { // 流程模块ID，如果有传说明是自定义审批
      type: Number | String,
      default: ''
    },
    /**
     * auth:
     * 0: 撤销，1:重新申请，2:审批，3:撤回，4:修改，5:撤回到发起，6:加签，7:申请人转交
     * 8: 审批人转交 9: 重新提交 10: 审批中可修改 11: 退回指定节点 12: 允许关闭流程
     */
    operateData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    isDraft: { // 最新一条审批状态
      type: Number,
      default: 0
    },
    disabled: {
      type: Boolean,
      default: true
    },
    // 请款相关
    examineStatus: { // 最新一条审批状态
      type: Number,
      default: null
    },
    currentExamineStatus: { // 每条审批记录的审批进度，点击查看后会改变，只用来判断撤销按钮，产品改需求 0草稿中 1审批中 2未过审 3已完成 4已关闭
      type: Number,
      default: null
    },
    isCreator: { // 是否为发起人
      type: Boolean,
      default: true
    },
    isComplete: { // 结算
      type: Boolean,
      default: false
    },
    isShowExamine: {
      type: Boolean,
      default: false
    },
    isExamineing: { // 审批记录列表中是否存在审批中
      type: Boolean,
      default: false
    },
    isExamined: { // 审批记录列表中是否存在已完成
      type: Boolean,
      default: false
    },
    commentTotal: {
      type: Number || String,
      default: 0
    },
    processStatus: { // 审批流程状态 0：草稿 1：审核中 2：未过审 3：已撤销 4：已完成 5：待提交
      type: Number,
      default: 0
    },
    isCreate: { // 是否为创建人
      type: Boolean,
      default: false
    },
    isApply: { // 是否为申请人
      type: Boolean,
      default: false
    },
    isNotOrder: { // 是否为非订单请款
      type: Boolean,
      default: true
    },
    // 签约内审
    createdContract: {// 是否关联合同
      type: Boolean,
      default: false
    },
    flowStructure: {// 流程信息
      type: Object,
      default: () => {
        return null;
      }
    },
    actionPermissions: { // 自定义表单页面操作权限
      type: Object,
      default: () => ({})
    },
    processDataList: {
      type: Array,
      default: () => ([])
    },
    isCurrentVersion: {// 是否当前版本
      type: Boolean,
      default: true
    },
    permissionDenied: { // 没有详情查看权限
      type: Boolean,
      default: false
    },
    isShowStampFixedTip: {
      type: Boolean,
      default: false
    },
    showRenewalContract: { // 签约内审-关联签约合同
      type: Boolean,
      default: false
    },
    showContractCreateBtn: { // 达人解约-发起合同审批
      type: Boolean,
      default: false
    },
    showResourceBtn: { // 达人上刊 - 刷新/编辑资源
      type: Boolean,
      default: false
    },
    canCreateAuth: { // 是否有新建权限，只有自定义审批才会传，因为自定义审批的权限是动态的
      type: Boolean,
      default: false
    },
    hidePressBtn: {
      type: Boolean,
      default: false
    },
    showSignUpSlot: {
      type: Boolean,
      default: false
    },
    examinId: {
      type: Number,
      default: null
    },
    paymentStatus: {
      type: Number,
      default: null
    },
    process: {
      type: Number,
      default: 1
    },
    showCommentBtn: {
      type: Boolean,
      default: false
    },
    showPrintBtn: {
      type: Boolean,
      default: false
    },
    needRest: {
      type: Boolean,
      default: false
    },
    showResourceSyncbtn: {
      type: Boolean,
      default: true
    },
    hiddenChangeApproval: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      mobileIcon,
      PROCESS_TYPE,
      PROCESS_CREATE_PERMISSION
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'showMobilePage': state => state.app.showMobilePage
    }),
    toggleKeyName() {
      return this.$route.name + '_toggleKey';
    },
    sessionCacheKey() {
      return sessionStorage.getItem(this.toggleKeyName) || null;
    },
    showOperateBtns() {
      return !this.isDraft && this.isCurrentVersion && !this.permissionDenied;
    },
    allowCloseProcess() {
      // 关闭流程其实就是作废流程，同一个接口
      // return (this.operateData.content && this.operateData.content.allowCloseProcess);
      return this.operateData.auth.includes(12);
    },
    isShowMoreBtnMobile() { // 手机适配
      const btnShow = this.isShowMenuSlot ||
      this.showRecallBtn || this.showResubmitBtn ||
      this.type !== PROCESS_TYPE.SETTLE ||
      (this.operateData.auth.includes(4) && this.isLegalType(this.type));
      return this.showMobilePage && btnShow;
    },
    showCommonBtns() {
      return (this.operateData.auth.includes(10) && this.isCurrentExamineUser) ||
      (this.type !== PROCESS_TYPE.SETTLE || this.isNotOrder) ||
      this.showPressBtn || (this.showSendBtn && this.type !== PROCESS_TYPE.SETTLE);
    },
    isShowMoreBtn() {
      const type = this.type;
      const operateData = this.operateData;
      if ((type === PROCESS_TYPE.CONTRACT || type === PROCESS_TYPE.HISTORY) && operateData.auth.includes(7)) {
        return true;
      }
      if (operateData.auth.includes(6) || operateData.auth.includes(8) || operateData.auth.includes(3) || operateData.auth.includes(5)) {
        return true;
      }
      if (this.isLegalType(type)) {
        if (operateData.auth.includes(0) || operateData.auth.includes(1) || this.getApproverStatus) {
          return true;
        }
      }

      if (type === PROCESS_TYPE.SETTLE) {
        if (this.hasRouteAuth('medium:supplierAudit:settleCopy') && this.isNotOrder) {
          return true;
        }
        if (this.operateData.auth.includes(0) && (this.currentExamineStatus === 0 || this.currentExamineStatus === 1) || this.currentExamineStatus === 5) {
          return true;
        }
        if ((!this.isExamineing || this.isShowExamine) && !this.isComplete && this.isCreator) {
          return true;
        }
        if (this.isExamined && !this.isExamineing && !this.isComplete && this.hasRouteAuth('medium:supplierAudit:success')) {
          return true;
        }
        if (!this.isExamined && !this.isExamineing && this.isCreator && !this.isComplete) {
          return true;
        }
        if (this.showExamineBackBtn || this.showExamineBackBtn || this.showSettleApprovalChangeBtn) {
          return true;
        }
      }
      if (this.showCommentBtn || this.showPrintBtn) {
        return true;
      }
      return false;
    },
    getCommentTotal() {
      return this.commentTotal > 99 ? '99+' : this.commentTotal;
    },
    showRecallBtn() { // 高级撤回权限
      let showRecallBtn = false;
      if (this.processStatus === 4) {
        showRecallBtn = {
          [PROCESS_TYPE.CONTRACT]: this.hasRouteAuth('crm:contract:higherRecall'),
          [PROCESS_TYPE.ENERGY]: this.hasRouteAuth('energy:energyAudit:higherRecall'),
          // [PROCESS_TYPE.SIGNUP]: this.hasRouteAuth('signUp:signUpAudit:higherRecall') && !this.createdContract,
          [PROCESS_TYPE.ORIGINAL]: this.hasRouteAuth('crm:original:higherRecall'),
          [PROCESS_TYPE.PAYBACK]: this.hasRouteAuth('crm:payBack:higherRecall'),
          [PROCESS_TYPE.REIMBURSEMENT]: this.hasRouteAuth('crm:reimbursement:higherRecall'),
          [PROCESS_TYPE.LOAN]: this.hasRouteAuth('crm:loan:higherRecall'),
          [PROCESS_TYPE.APPROVAL]: !!this.actionPermissions.hasHigherRecall,
          [PROCESS_TYPE.ARREARS_TRANSFER]: this.hasRouteAuth('crm:arrearsTransfer:higherRecall')
        }[this.type] || false;
      }
      return showRecallBtn;
    },
    /* canLaunchExamine() { // 付款申请是否可以发起审批
      return this.isShowMoreBtn && (!this.isExamineing || this.isShowExamine) && !this.isComplete && this.isCreator;
    }, */
    showResubmitBtn() {
      let isAuth = this.isCreate || this.isApply;
      if (this.type === PROCESS_TYPE.APPROVAL) {
        // 如果是自定义审批，则根据 operateData.auth 来控制，9
        isAuth = this.operateData.auth.includes(9);
      }
      return this.processStatus === 2 && this.isLegalType(this.type) && isAuth;
    },
    // 审批转交
    getApproverStatus() { // 审批转交权限 【3.2.6】无需审批转交权限也展示按钮，可转交自己
      return this.processStatus !== 4;
    },
    // 显示催办按钮
    showPressBtn() { // 审批中且为（审批人员、创建人）展示按钮、不为达人结算节点，客户调额申请如果客户被删除不显示催办
      let processList = [];
      if (this.flowStructure && this.flowStructure.process) {
        processList = this.flowStructure.process;
      }
      const allExamineUserList = [];
      processList.map((process, index) => {
        if ((process.nodeName === '任务发起' && index === 0) || process.nodeType === 3) {
          return;
        }
        process.examineRoles.map((item) => {
          item.aduitors.forEach((j) => {
            if (!allExamineUserList.find(i => i.id === j.id)) {
              allExamineUserList.push(j);
            }
          });
        });
      });
      const isAccountSettle = this.currentNode && this.currentNode.nodeType === 4;// 达人结算节点
      return (allExamineUserList.find(el => el.id === this.userInfo.id) || this.isCreate) && this.processStatus === 1 && !isAccountSettle && !this.hidePressBtn;
    },
    // 当前审批节点
    currentNode() {
      if (this.flowStructure && this.flowStructure.process) {
        const processList = this.flowStructure.process;
        return processList.find(e => e.nodeStatus === 1);
      }
      return {};
    },
    // 显示取消加急按钮
    showCancelPressBtn() { // 已被加急 且 为申请人,创建人时展示按钮
      return (this.flowStructure && this.flowStructure.isExpedited && this.flowStructure.isExpedited === 1 && (this.isCreate || this.isApply));
    },
    // 显示抄送按钮
    showSendBtn() { // 无抄送权限：非草稿/撤销且为（审批人员、创建人）展示按钮，有抄送权限：非草稿/撤销展示按钮
      if (this.processStatus === 0) return;
      let processList = [];
      if (this.flowStructure && this.flowStructure.process) {
        processList = this.flowStructure.process;
      }
      const allExamineUserList = [];
      processList.map((process, index) => {
        if ((process.nodeName === '任务发起' && index === 0) || process.nodeType === 3) {
          return;
        }
        process.examineRoles.map((item) => {
          item.aduitors.forEach((j) => {
            if (!allExamineUserList.find(i => i.id === j.id)) {
              allExamineUserList.push(j);
            }
          });
        });
      });
      return (allExamineUserList.find(el => el.id === this.userInfo.id) || this.isCreate) || this.actionPermissions.hasSend || this.hasRouteAuth(PROCESS_SEND_PERMISSION[this.type]);
    },
    // 显示签约内审——解约按钮
    showCancelContract() {
      return this.processStatus === 4 && this.hasRouteAuth('crm:termination:create');
    },
    isCurrentExamineUser() { // 当前用户是否是当前节点审批人
      const processList = this.processDataList;
      if (!processList || processList.length === 0) return false;
      let item = null;
      processList.forEach(i => {
        // nodeStatus 节点状态： 0：结束 1：进行中 2：未审批
        if (!item && i.nodeStatus === 1) {
          item = i;
        }
      });
      if (!item || item.length === 0) return false;
      let userList = [];
      item.items.forEach(i => {
        userList = userList.concat(i.users);
      });
      return userList.some(i => {
        return i.id === this.userInfo.id;
      });
    },
    // 付款
    showPaymentBtn() {
      return this.currentExamineStatus === 4 && !this.isComplete && !this.paymentStatus && this.hasRouteAuth('medium:supplierAudit:pay');
    },
    // 付款申请审批单撤回
    showExamineBackBtn() {
      return this.process !== 4 && this.currentExamineStatus === 4 && hasRouteAuth('medium:supplierAudit:higherRecall');
    },
    // 申请余款
    showAgainLaunchBtn() {
      // return !this.isComplete && !this.isExamineing && this.isCreator && this.needRest;
      return (this.isCreator || this.isApply) && this.needRest && !this.isComplete;
    },
    showCommonEditBtn() {
      return this.operateData.auth.includes(4) && this.isLegalType(this.type);
    },
    // 付款申请审批单修改
    showEditBtn() {
      return (this.currentExamineStatus === 2 || this.currentExamineStatus === 5) && !this.isComplete && !this.isExamineing && this.isCreator;
    },
    showSettleApprovalChangeBtn() {
      return this.type === PROCESS_TYPE.SETTLE && this.currentExamineStatus !== -1 && this.currentExamineStatus !== 4 && !this.isComplete;
    },
    // 再次发起（复制）显示权限
    showCreateAgain() {
      // (自定义审批 && 新建权限) || (除了请款结算的订单请款外的固定审批 && 有新建权限)
      // ((this.type !== PROCESS_TYPE.SETTLE || this.isNotOrder) && hasRouteAuth(PROCESS_CREATE_PERMISSION[this.type]));
      // 付款(订单、非订单都隐藏)
      return (this.type === PROCESS_TYPE.APPROVAL && this.canCreateAuth) ||
      (![PROCESS_TYPE.SETTLE, PROCESS_TYPE.BLOGGER_FILTER, PROCESS_TYPE.UP_ONLINE].includes(this.type) && hasRouteAuth(PROCESS_CREATE_PERMISSION[this.type]));
    }
  },
  methods: {
    hasRouteAuth,
    isLegalType(type) {
      if (type === PROCESS_TYPE.SETTLE || type === PROCESS_TYPE.HISTORY) return false;
      return true;
    },
    handleRecall(auth) {
      this.$emit('handleRecall', auth);
    },
    handleRevocation(isRevocation = 1) {
      const msg = `
      <div style="font-size:18px;">请确认是否作废本次申请，作废后该<span style="color: red;">审批失效，且无法继续走该流程；</span>请输入“确认作废申请”</div>
      `;
      this.$prompt(msg, '', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
        cancelButtonText: '再想想',
        inputPlaceholder: '请输入“确认作废申请”',
        type: 'warning',
        showClose: false,
        center: true,
        inputPattern: /^确认作废申请$/,
        inputErrorMessage: '请输入“确认作废申请”',
        iconClass: 'charge-icon',
        customClass: `del-message del-message-cancel ${this.showMobilePage ? ' mobile-message' : ''}`
      }).then(({ value }) => {
        if (value === '确认作废申请') {
          this.$emit('handleRevocation');
        } else {
          ElMessage.warning(`请输入“确认作废申请”`);
        }
      });
    },
    handleRemodify() {
      this.$emit('handleRemodify');
    },
    handleAudit(value) {
      this.$emit('handleAudit', value);
    },
    handleReapply() {
      const params = {
        relatedId: this.operateData.relatedId,
        relatedProcessId: this.operateData.relatedProcessId
      };
      this.$emit('handleReapply', params);
    },
    handleToggleProcess: _.debounce(function(type) {
      this.$emit('handleToggleProcess', type, this.type);
    }, 500),
    toPay() {
      this.$emit('toPay');
    },
    handleEditResource() {
      this.$emit('handleEditResource');
    },
    handleRefreshResource() {
      this.$emit('handleRefreshResource');
    },
    handleExamineBack() {
      this.$emit('handleExamineBack');
    },
    toEdit() {
      this.$emit('toEdit', { id: this.examinId });
    },
    toBack() {
      this.$emit('toBack');
    },
    handleAddSigner() {
      this.$emit('handleAddSigner');
    },
    launchExamine() {
      this.$emit('launchExamine');
    },
    handleSettleCopy() {
      this.$emit('handleSettleCopy');
    },
    successSettle() {
      this.$emit('successSettle');
    },
    againLaunch() {
      this.$emit('againLaunch', { id: this.examinId });
    },
    closeSettle() {
      this.$emit('closeSettle');
    },
    handleHisEdit() {
      this.$emit('handleHisEdit');
    },
    deliverTo(type) {
      this.$emit('deliverTo', type);
    },
    handleComment() {
      this.$emit('handleComment');
    },
    handlePrint() {
      this.$emit('handlePrint');
    },
    showCommentDialog() {
      this.$emit('showCommentDialog');
    },
    handleHigherRecall() {
      this.$emit('handleHigherRecall');
    },
    handleResubmit() {
      this.$emit('handleResubmit');
    },
    handleApproverChange() {
      this.$emit('handleApproverChange');
    },
    handleSupplierApproverChange() {
      this.$emit('handleSupplierApproverChange', this.examinId);
    },
    handlePressSend() {
      this.$emit('handlePressSend');
    },
    handleCancelPress() {
      this.$emit('handleCancelPress');
    },
    handleCreateNew() {
      this.$emit('handleCreateNew');
    },
    handleSendMsg() {
      this.$emit('handleSendMsg');
    },
    handleModify() {
      this.$emit('handleModify');
    },
    handleSignUpSync() {
      this.$emit('handleSignUpSync');
    },
    handleContractCreate() {
      this.$emit('handleContractCreate');
    },
    closeProcess() {
      // 结束流程
      this.$emit('handleCloseProcess');
    }
  }
};
</script>

<style lang="scss" scoped>
.btn-bar {
  width: 100%;
  display:flex;
  justify-content: center;
  bottom: 24px;
  &.operate-bar {
    justify-content: space-between;
    padding-right: 24px;
    .btn-bar-left, .btn-bar-center, .btn-bar-right {
      display: flex;
      flex: 1;
    }
    .btn-bar-left {
      justify-content: flex-start;
    }
    .btn-bar-center {
      justify-content: center;
    }
    .btn-bar-right {
      justify-content: flex-end;
    }
  }
  &::v-deep {
    .el-button {
      margin-left: 16px;
    }
  }
  &.is-mobile {
    &::v-deep {
      .el-button {
        margin-left: 8px;
      }
    }
  }
}
.empty-btn-style {
  border-color: #406EFF;
  background: #fff;
  color: #406EFF;
  width: 80px;
  padding: 7px 0;
  display: flex;
  justify-content: center;
}
.refuse-btn {
  border-color: #FF4E5F;
  color: #FF4E5F;
}
.more-actions {
  padding: 8px 12px;
}
.process-operation-btn {
  position: absolute;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  color: #999;
}
.process-operation-to-prev {
  left: -10px;;
}
.close-process-btn {
  padding: 7px 15px;
}
.process-operation-to-next {
  right: -10px;
}
.process-operation {
  .stamp-fixed-tip {
    z-index: 2002;
    background-color: #FFF8EA;
    border-radius: 4px;
    font-size: 14px;
    padding: 3px 22px 3px 8px;
    margin-left: 40px;
    line-height: 24px;
    position: absolute;
    top: -40px;
    span {
      color: #333;
    }
    .icon {
      cursor: pointer;
      margin-left: 8px;
      color: #C0C4CC;
      &:hover {
        color: #909399;
      }
    }
    ::v-deep {
      .el-icon-warning {
        color: #E6A23C;
      }
    }
  }
}
.mobile-pagination {
  z-index: 2001;
  .stamp-fixed-tip {
    top: unset;
    bottom: 46px;
    position: fixed;
  }
}
.mobile-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  .text {
    font-size: 10px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    color: #aeb6c7;
    line-height: 14px;
    margin-top: 2px;
  }
  .img{
    width: 24px;
    height: 24px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
